<template>
	<view class="app">
		<view class="Setting">
			<AppNavbar :bgColor="'#ededed'" title="Password management" titlecolor="#000" leftIconColor="#000"
				@rightClick="rightClickFun" fontWeight="600">
			</AppNavbar>

			<template v-for="item in abilitys" :key="item.label">
				<mySettings :list="item" ></mySettings>


			</template>
		</view>

	</view>
</template>

<script setup>
	// import mySettings from '/components/my-settings.vue';
	import {
		reactive,
		ref
	} from 'vue';
	const show = ref(false)
	const buttonShow = ref(false)
	const abilitys = reactive([
		[{
			label: "Change your Geogle account",
			path: 'emit',
		}],
		[

			{
				label: "Change email account",
				path: 'equipment',
				url: "/pages/Setting/changeAccount",
			}
		],
		[

			{
				label: "Change password",
				path: 'Earth',
				url: "/pages/Setting/changePassword",
			}
		]

	])


	function goto(url) {
		uni.$to(url)
	}

	function rightClickFun() {
		console.log('hah');
		buttonShow.value = !buttonShow.value
	}
</script>

<style lang="scss" scoped>
	.app {
		.Setting {

			// border: 1px solid red;
			background-color: #ededed;


			.Setting-abilitys {
				// border: 1px solid red;
				background-color: #fff;

				.Setting-ability-item {
					flex-wrap: wrap;

					.Setting-ability-item-left {
						image {
							width: 45rpx;
							height: 45rpx;
						}
					}

					.Setting-ability-item-detail {
						width: 40rpx;
						height: 40rpx;
					}
				}
			}
		}
	}
</style>